import { Component } from "react";
import Chapter1 from "./components/chapter1";
import Chapter2 from "./components/chapter2";
import Chapter3 from "./components/chapter3";
import Chapter4 from "./components/chapter4";
import Chapter5 from "./components/chapter5";
import Chapter6 from "./components/chapter6";
import Chapter7 from "./components/chapter7";
import Chapter8 from "./components/chapter8";
import Chapter9 from "./components/chapter9";
import Chapter10 from "./components/chapter10";
import Chapter11 from "./components/chapter11";
import Chapter12 from "./components/chapter12";
import Chapter13 from "./components/chapter13";
import Chapter14 from "./components/chapter14";
import Chapter15 from "./components/chapter15";

class App extends Component {
    render() {
        return (
            <>
                <div className='page-header'>
                    <h1>
                        React <small>react基础语法</small>
                    </h1>
                </div>
                <div className='page-content'>
                    <Chapter1 title='Chapter1 虚拟DOM' />
                    <Chapter2 title='Chapter2 内联样式' />
                    <Chapter3 title='Chapter3 列表渲染' />
                    <Chapter4 title='Chapter4 类组件和函数组件' />
                    <Chapter5 title='Chapter5 组件状态state' />
                    <Chapter6 title='Chapter6 setState是异步的' />
                    <Chapter7 title='Chapter7 组件的props' />
                    <Chapter8 title='Chapter8 ref获取DOM元素' />
                    <Chapter9 title='Chapter9 事件传参' />
                    <Chapter10 title='Chapter10 children属性' />
                    <Chapter11 title='Chapter11 createPortal' />
                    <Chapter12 title='Chapter12 组件的销毁阶段' />
                    <Chapter13 title='Chapter13 组件的挂载阶段' />
                    <Chapter14 title='Chapter14 组件的更新阶段' />
                    <Chapter15 title='Chapter15 案例：ToDo应用' />
                </div>
            </>
        );
    }
}

export default App;
